05. The Revealing Module Pattern

Here's the link to the commit

The Revealing Module Pattern

The underlying philosophy of the Revealing Module Pattern is that, while we still maintain encapsulation (as in the Module Pattern), we also reveal certain properties (and methods). The key ingredients to the Revealing Module Pattern are:

1. An IIFE (wrapper)
2. The module content (variables, methods, objects, etc.)
3. A returned object literal

Another Example

To bring it all home, let's check out a more complex example:

let person = (function () {
  let privateAge = 0;
  let privateName = 'Andrew';

  function privateAgeOneYear() {
    privateAge += 1;
    console.log(`One year has passed! Current age is ${privateAge}`);
  }

  function displayName() {
    console.log(`Name: ${privateName}`);
  }

  function ageOneYear() {
    privateAgeOneYear();
  }

  return {
    name: displayName,
    age: ageOneYear
  };
})();

In the above snippet, the IIFE has some private data: privateAge, privateName, and privateAgeOneYear(). The returned object is stored in person and provides a public interface through which we can access this data!

Let's first check out what the returned person looks like:

{
    name: displayName,
    age: ageOneYear
};

Note that the name() method reveals the otherwise private displayName() function:

console.log(person.name());

// 'My name is Andrew'

However, what happens if we try to access and mutate privateName?

person.privateName = 'Richard';

console.log(person.name());
// 'My name is Andrew'

person.name() still produces the string My name is Andrew! Why don't we see the string 'Richard' in the returned string?

Pay close attention to what the first line of code is actually doing: it simply adds a privateName property to the person object. It has no effect on the privateName variable that exists inside the IIFE itself! If we look at the person.name() function, it is using the privateName variable that exists inside the IIFE. So even if we add a person.privateName property, the person.name() method doesn't ever try to access it.

Note that accessing displayName() directly won't be effective, either! This should come as now surprise, since displayName() is just a function defined inside the IIFE (i.e., displayName() is not a property in the returned object).

console.log(person.displayName());

// undefined

Likewise, the Revealing Module Pattern also gives us access to the captured privateAge variable, via the returned object literal's age() method:

console.log(person.age());

// 'One year has passed! Current age is 1'

console.log(person.age());

// ''One year has passed! Current age is 2'

Benefits of the Revealing Module Pattern

When writing your modules, there are a few key advantages of using the Revealing Module Pattern. For one, there is clarity at the end of the module (i.e., the return statement) as to which variables or methods may be accessed publicly. Modules may grow large, and this eases readability for other developers who read your code.

Along with clear intent of public or private data, the Revealing Module Pattern lends itself to consistent syntax as well. In contrast, the normal Module Pattern may contain variables and functions spread throughout the entire function body.

While you can't go wrong with either approach to create private properties in your code, be sure to take the time and choose which makes the most sense for your project!

Summary

The Revealing Module Pattern is a slight variation on the Module Pattern. IIFE's, local variables/functions, and a returned object literal with revealed data make up the structure and syntax of the Revealing Module Pattern. While it still maintains encapsulation of data, certain variables and functions are returned in an object literal.

In the next section, we'll take a look at object-oriented JavaScript in the real-world, especially in popular library code and frameworks.

Further Research

• Addy Osmani's The Revealing Module Pattern (JavaScript Design Patterns)
• Christian Heilmann's Again with the Module Pattern – reveal something to the world